<template>
	<div class="app-container" ref="video">
		<el-container>
			<el-aside class="aside" width="250px">
				<device-tree></device-tree>
			</el-aside>
			<el-main class="main">
				<play-panel></play-panel>
			</el-main>
		</el-container>
	</div>
</template>
<style scoped>
.app-container {
	.aside {
		height: 100%;
		padding: 0;
		background-color: white;
	}

	.main {
		padding: 0;
		margin-left: 10px;
		background-color: #eef1f6;
	}
}

::v-deep .el-container {
	height: 100% !important;
}
</style>

<script>
import deviceTree from '@/components/vplat/DeviceTree/deviceTree';
import playPanel from '@/components/vplat/PlayPanel/playPanel';

export default {
	name: "Video",
	components: {//使用自定义组件
		deviceTree,
		playPanel,
	},
	dicts: [],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 总条数
			total: 0,
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			
		};
	},
	created() {
		
	},
	mounted() {
		this.setTreeHeight();
	},
	watch: {
		
	},
	methods: {
		setTreeHeight() {
			let video = this.$refs.video;
			//方式一:
			var offsetTop = this.getElementOffsetTop(video);
			//方式二:
			//var offsetTop = video.getBoundingClientRect().top;
			//浏览器窗口高度
			var browserHeight = window.innerHeight;
			//使有js动态设置高度
			video.style.height = (browserHeight - offsetTop) + "px";
		},
		getElementOffsetTop(element) {
			var top = 0;
			while (element) {
				top += element.offsetTop || 0;
				element = element.offsetParent;
			}
			return top;
		},
		
	}
};
</script>

